<template>
  <div class="person">
<!--    <h2>{{a}}</h2>-->
    <ul>
      <li v-for="i in list" :key="i.id">
        {{i.name}} --{{i.age}} -- {{i.id}}
      </li>
    </ul>
<!--    <h2>{{list}}</h2>-->
  </div>

</template>

<script setup lang="ts" name="Person">
import { withDefaults } from 'vue'
import {type Persons} from '@/types'

// 只接收 list
// defineProps(['list'])


// 接收 list,限制类型
// defineProps<{list:Persons}>()

// 接收 list,限制类型 + 限制必要性 + 指定默认值
withDefaults(
    defineProps<{list?:Persons}>(),
    {
      list:()=>[{id: '04', name: 'jeff', age: 80}]
    }
)



// 接收list ,同时将props保存起来
// let x = defineProps([ 'list'])
// console.log(x.list)
</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>